<template>
  <component :is="(menu.children && menu.children.length > 0) ? 'el-submenu' : 'el-menu-item'" :index="menu.menuUri">
    <template v-if="(menu.children && menu.children.length > 0)">
       <template slot="title">
        <!-- <i :class="menu.menuIcon" v-if="menu.menuIcon"></i> -->
        <iconpark-icon  v-if="menu.menuIcon" :name="menu.menuIcon" class="menu-icon" size="1.3em"></iconpark-icon>
        <span slot="title">{{menu.menuName}}</span>
      </template>
      <nja-menu-item v-for="(m, i) in menu.children" :key="i" :menu="m"></nja-menu-item>
    </template>
     <template v-else>
        <!-- <i :class="menu.menuIcon" v-if="menu.menuIcon"></i> -->
        <iconpark-icon  v-if="menu.menuIcon" :name="menu.menuIcon" class="menu-icon" size="1.3em"></iconpark-icon>
        <span slot="title">{{menu.menuName}}</span>
      </template>
  </component>
</template>

<script>
export default {
  name: 'nja-menu-item',
  props: {
    menu: {
      type: Object,
      default () {
        return {}
      }
    },
    index: {
      type: String,
      default: ''
    }
  },
  mounted () {
    console.log(' $router.p',  this.$route.path)
  }
}
</script>

<style lang="scss">
.menu-icon {
  margin-right: 5px;
  margin-bottom: 1px;
}
</style>
